//import {Table, ConfigProvider } from 'antd'; // 引入ConfigProvider全局化配置
import zhCN from 'antd/es/locale/zh_CN';  // 引入中文包

import React,{Component} from 'react';
import role from './index.module.css'
import { Input } from 'antd';
import getday from '../../util/getday'

import {ConfigProvider, Select, Button, Table, Tag, Modal, message, Radio, Checkbox, Row, Col, Divider} from 'antd';
const { Option } = Select;
export default class RoleList extends Component{
    state={
      asd:'',
        status:'all',
        visibleE: false,
        roleName:'',
        oneRole:'',
        menulimits:[],
        menuAll:[],
        oprlimits:'',
        asdasd:[],
        lookhandle:[],
        data :[],
        limitsChe:[],
        handleAll:[],
        defaultHandle:[],
        roleid:1,
        pushMenu:[],
        pushHandle:[],
        oprChe:[{'A':'添加'},{'D':'删除'},{'E':'修改'},{'U':'上传'},{'X':'下载'},{'S':'开始'},{'O':'结束'}],
        columns:[
            {
              title: '角色ID',
              dataIndex: 'roleid',
              key: 'roleid',
            },
            {
              title: '角色名称',
              dataIndex: 'roleName',
              key: 'roleid',
            },
            {
              title: '状态',
              dataIndex: 'status',
              key: 'roleid',
              render:(value,item,key)=>{
                return <div >
                {
                  item.status==='ok'?<p style={{marginBottom:0}}>已启用</p>:<p style={{marginBottom:0}}>已冻结</p>
                }
                </div>
              }
            },
            {
              title: '菜单权限',
              key: 'roleid',
              dataIndex: 'menulimits',
              render:(value,item,key)=>{
                return <div>
                    <span className={role.num}>{item.menulimits.split(',').length}项</span>
                    <Button type="link" style={{width:'30px',marginLeft:-10}} onClick={()=>this.info(item.roleid)}>查看</Button>
                </div>                
                
              }
            },
            {
              title: '操作权限',
              key: 'roleid',
              dataIndex: 'oprlimits',
              render:(value,item,key)=>{
                return <div>
                    <span className={role.num}>{item.oprlimits.split(',').length}项</span>
                    <Button type="link" style={{width:'30px',marginLeft:-18}} onClick={()=>this.infohandle(value)}>查看</Button>
                </div>                
                
              }
            },
            {
              title: '创建时间',
              key: 'roleid',
              dataIndex: 'createTime',
              render:(value,item,key)=>{
                return <div>
                  {
                    getday(value*1)
                  }
                </div>
              }
            }, 
            {
                title: '操作',
                key: 'roleid',
                dataIndex: 'roleid',
                render:(value,item,key)=>{
                  return <div>
                      {
                        item.roleName==='超级管理员'?null:item.status==='freeze'?<Tag color="processing" key='123' onClick={()=>this.roleOk(item.roleid)}>启用</Tag>:<Tag color="processing" key='123' onClick={()=>this.btnEdit(item)}>编辑</Tag>
                      }
                      {
                        item.roleName!=='超级管理员' && item.status==='ok'?<Tag color="default" key='1234' onClick={()=>this.roleDel(item.roleid)}>冻结</Tag>:null
                      }
                  </div>
                }
            },
          ],
           
        }

    //获取后台数据
      initData=()=>{
       this.$httpReq(this.$api.roleList(),res=>{
          res.data.roleData.sort((a,b)=>b.createTime*1-a.createTime*1)
          this.setState({data:res.data.roleData}) 
        })
      }

     componentDidMount(){
         this.initData()
      }

      //点击搜索
      searchbtn=()=>{
        const {roleName,status}=this.state
        this.$httpReq(this.$api.searchRoleList({roleName,status}),res=>{
         
          this.setState({data:res.data})
        })
      }

      //点击冻结 弹层
    roleDel=(id)=>{
      Modal.confirm({
        title:'是否确认冻结该账号？',
        content:(
          <div>操作后该用户将不能登录？</div>
        ),
        onOk:()=>{
          this.$httpReq(this.$api.roleIco({roleid:id}),res=>{
            
            if( res.code === 1){
              this.initData()
              return 
            }
            message.info(res.msg)
          })
        }
      })
    }

    //点击启用 弹层
     roleOk=(id)=>{
      Modal.confirm({
        title:'是否确认启用该账号？',
        content:(
          <div>操作后此用户可以被编辑？</div>
        ),
        onOk:()=>{
          this.$httpReq(this.$api.blackRoleIco({roleid:id}),res=>{
            if( res.code === 1){
              this.initData()
              return 
            }
            message.info(res.msg)
          })
        }
      })
    }

    //点击查看 菜单权限 弹层
    info=(id)=> {
      
      this.$httpReq(this.$api.getmenulimitsData({roleid:id}),res=>{
          this.setState({limitsChe:res.data})
          Modal.info({
            title: '可查看的菜单栏列表：',
            content: (
              <div>
                {
                  res.data.map(item=>{
                    return <span className={role.limitsChe}>{item}</span>
                  })
                }
              </div>
            )
          });
      })   
    }

    //点击查看 操作权限 弹层
    infohandle=(value)=> {
      let hanlearr=value.split(',')
      let handleChe=[]
        const {oprChe}=this.state
        oprChe.forEach(item=>{
            hanlearr.forEach(j=>{
              if(item[j]!==undefined){
                handleChe.push(item[j])
              }         
            })
        })
         
          Modal.info({
            title: '可查看的操作栏列表：',
            content: (
              <div>
                {
                  handleChe.map(item=>{
                    return <span className={role.limitsChe}>{item}</span>
                  })
                }
              </div>
            )
          })   
    }

    //点击编辑 弹层 
    btnEdit = (item) => { 
      this.setState({ visibleE: true, roleid:item.roleid,  oneRole:item.roleName, menulimits:item.menulimits, oprlimits:item.oprlimits, status:item.status});
     
      let newarr=[]
      let menulist=[]
      let handlelist=[]
      let newhandle=[]

       this.$httpReq(this.$api.roleList(),res=>{

        //拿到全部菜单权限的数据
       Object.keys(res.data.menuData).forEach(item=>{
          if(res.data.menuData[item].menuName){
            menulist.push(res.data.menuData[item].menuName)
          }else{
            menulist.push(res.data.menuData[item].belongTitle)
          }
        })
         this.setState({menuAll:menulist})

        //拿到默认选中的菜单权限
        let arr=item.menulimits.substr(1,item.menulimits.length-2).split(',')
        arr.forEach(item=>{
          if(res.data.menuData[item].menuName){
            newarr.push(res.data.menuData[item].menuName)
          }else{
            newarr.push(res.data.menuData[item].belongTitle)
          }
        })

         this.setState({asdasd:newarr})

         //拿到全部操作权限的数据
         Object.keys(res.data.oprObj).forEach(item=>{
          handlelist.push(res.data.oprObj[item])
        })
         this.setState({handleAll:handlelist})

         //拿到默认的选中的操作权限
         let handleArr=item.oprlimits.substr(0,item.menulimits.length-1).split(',')
          handleArr.forEach(item=>{
            newhandle.push(res.data.oprObj[item])
          })
          this.setState({defaultHandle:newhandle})
      })   
  };
  //编辑 里面的菜单列表的选中事件
  onChange=(checkedValues)=> {  
    this.setState({asdasd: checkedValues});
  }

  //
  onChangehandle=(checkedValues)=>{
    this.setState({defaultHandle:checkedValues})
  }

    //弹层 点击确定
  handleOke = e => {
    const {asdasd,defaultHandle}=this.state   
    this.setState({visibleE: false,})
    
    let submitMenu=[]
    let submitHandle=[]
    this.$httpReq(this.$api.roleList(),res=>{

       //返回后台需要更改的 菜单数据 数字数组
      Object.keys(res.data.menuData).forEach(item=>{
          asdasd.forEach(j=>{
            if(res.data.menuData[item].menuName===j){
              submitMenu.push(res.data.menuData[item].key)
            }else if(res.data.menuData[item].belongTitle===j){
              submitMenu.push(res.data.menuData[item].key)
            }
          })
         
      })
      //console.log(submitMenu)//要提交的菜单数据
      this.setState({pushMenu:submitMenu})
      //返回后台的需要更改的 操作权限字母 字符串
      Object.keys(res.data.oprObj).forEach(item=>{
        defaultHandle.forEach(j=>{
          if(res.data.oprObj[item]===j){
            submitHandle.push(item)
          } 
        })
        
      })
      //console.log(submitHandle.join())//要提交的操作菜单数据
      this.setState({pushHandle:submitHandle.join()})
      this.$httpReq(this.$api.setRole({roleName:this.state.oneRole,roleid:this.state.roleid, status:this.state.status, menulimits:this.state.pushMenu, oprlimits:this.state.pushHandle}),res=>{
        message.info(res.msg)
        this.initData()
      })
    })

  };

  //弹层 点击取消
  handleCancele = e => { 
    this.setState({ visibleE: false,})
  };
   
  
    render(){
       const {columns,data,roleName,status,menuAll,oneRole,asdasd,handleAll,defaultHandle}=this.state
       
       return <ConfigProvider locale={zhCN}>
       <div className={role.box}>
              <div style={{marginTop:15}}>
                  角色名称：<Input placeholder="请输入关键字" style={{ width: 220,marginRight:'40px' }} value={roleName} onChange={e=>this.setState({roleName:e.target.value})}/>
                  角色状态： <Select style={{ width: 220 }} value={status} onChange={value=>this.setState({status:value})}>
                                <Option value="all">全部</Option>
                                <Option value="ok">启用</Option>
                                <Option value="freeze">冻结</Option>
                            </Select>
                 <Button type="primary"  className={role.serachbtn} onClick={this.searchbtn}>搜索</Button>
              </div>
              <div className={role.serachp}>
                  <span className={role.serachspan} onClick={()=>this.props.history.push('/home/role/addRole')}>添加角色</span>
              </div>
              <Table columns={columns} dataSource={data} size="middle" pagination={{pageSize:6}} rowKey={item=>item.roleid}/>
               {/*编辑弹层 */}
               <Modal title="编辑角色信息" visible={this.state.visibleE} onOk={this.handleOke} onCancel={this.handleCancele}>
                  <div className={role.and} style={{fontSize: 16}}>
                    <span style={{color:'black',fontSize:16}}> 角色名称：</span>
                 <Input value={oneRole} onChange={e=>this.setState({oneRole:e.target.value})} style={{ width: '82%'}}/></div>
                  <div className={role.and}>
                  <Divider orientation="left">菜单权限</Divider>
                  
                      <Checkbox.Group style={{ width: '100%',marginTop:'10px'}} value={asdasd}  onChange={this.onChange}>
                            <Row>
                              {   
                                    menuAll && menuAll.map(item=>{
                                      return <Col span={8} style={{marginBottom:'5px'}} key={item}>
                                      <Checkbox value={item}>{item}</Checkbox>
                                    </Col>
                                    }) 
                              }        
                            </Row>
                          </Checkbox.Group> 
                  </div>
                  
                  <div className={role.and}>
                  <Divider orientation="left">操作权限</Divider>
                      <Checkbox.Group style={{ width: '100%',marginTop:'10px'}} value={defaultHandle}  onChange={this.onChangehandle}>
                            <Row>
                              {
                                   handleAll.map(item=>{
                                    return <Col span={8} style={{marginBottom:'5px'}} key={item}>
                                    <Checkbox value={item}>{item}</Checkbox>
                                  </Col>
                                  })
                              }        
                            </Row>
                          </Checkbox.Group>,   
                  </div>
                    状态：<Radio.Group name="radiogroup" value={status} onChange={ e => this.setState({status:e.target.value})} style={{marginLeft:45}}>
                    <Radio value={'ok'}>启用</Radio>
                    <Radio value={'freeze'}>禁用</Radio>
                  </Radio.Group>
                </Modal>
          
       
       
       </div>
       </ConfigProvider>
    }
}

